<template>
    <div>
        <el-button size="small" @click="handleImport">导 入</el-button>

        <el-dialog title="导入" :visible.sync="dialogVisible">
            <el-upload class="upload" drag :show-file-list="false" :action="action" multiple :headers="headerObj" :on-success="handleSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
    name: "upload",
    props: {
        url: {
            type: String,
            default: ""
        }
    },
    computed: {
        action() {
            return `${process.env.VUE_APP_BASE_API}${this.url}`
        },
        headerObj() {
            return {
                token: getToken()
            }
        }
    },
    mounted() {
        console.log("process",)
    },
    data() {
        return {
            dialogVisible: false,
        }
    },
    methods: {
        handleSuccess(response){
            console.log("response",response);
            if(response.code == 200){
                this.dialogVisible = false;
                this.$message.success('导入成功')
                this.$emit("uploadSuccess");
            }
        },
        handleImport() {
            this.dialogVisible = true;
        }
    }
}
</script>
<style lang="scss" scoped>
    .upload{
        text-align: center;
    }
</style>